<template>
  <div>
    <section style="height: 70px"></section>
    <section>
      <div class="container container-classify">
        <div class="row">
          <div class="item-list d-flex col-md-12">
            <div >分类</div>
            <div class="item-box">
              <div class="item-line  lable-name"
              :class="[state.currentClassifyIndex==0?'active':'']"
               @click="searchClassify(0)" style="border-right: 1px solid #722314">
                全部
              </div>
              <div
                class="item-line lable-name"
                v-for="(item, index) in state.classifyList"
                :key="index"
                 :class="[state.currentClassifyIndex==item.id?'active':'']"
                @click="searchClassify(item.id)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="item-list d-flex col-md-12">
            <div>口味</div>
            <div class="item-box">
              <div class="item-line lable-name" 
              :class="[state.currentFlavorIndex==0?'active':'']"
              @click="searchFlavor(0)"
              style="border-right: 1px solid #722314">
                全部
              </div>
              <div
                class="item-line lable-name"
                v-for="(item, index) in state.flavorList"
                :key="index"
                :class="[state.currentFlavorIndex==item.id?'active':'']"
                @click="searchFlavor(item.id)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="item-list d-flex col-md-12">
            <div>人群</div>
            <div class="item-box">
              <div class="item-line lable-name" 
              @click="searchCrowd(0)"
              :class="[state.currentCrowdIndex==0?'active':'']"
              style="border-right: 1px solid #722314">
                全部
              </div>
              <div
                class="item-line lable-name"
                v-for="(item, index) in state.crowdList"
                :key="index"
                :class="[state.currentCrowdIndex==item.id?'active':'']"
                @click="searchCrowd(item.id)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container ">
      <div class="container-cake-box">
        <div
          v-for="(items, indexs) in state.cakeList"
          :key="indexs"
          class="item-border"
          @click="goToDetails(items.id)"
        >
            <img :src="items.img" style="width: 200px; height: 200px" />
            <div class="item-info">
              <div class="name">{{ items.name }}</div>
              <div class="price">￥{{ items.price }}</div>
            </div>
      
        </div>
        <div style="width:100%" v-if="!(state.cakeList.length)">
            <el-empty description="暂时商品" />
          </div>
      </div>


        <div class="demo-pagination-block" style="margin: 30px 0px">
          <el-pagination
            v-model:current-page="state.search.page"
            v-model:page-size="state.search.limit"
            :page-sizes="
              state.search.total <= 40
                ? [12, 24, 36, 48]
                : [12, 24, 36, 48, state.search.total]
            "
            :disabled="false"
            :background="true"
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="state.search.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount,onMounted,defineEmits } from "vue";
import { useRoute } from "vue-router";
import router from "../../router";
import request from "../../api/request";
const route = useRoute();

const emit = defineEmits()
onBeforeMount(()=>{
  emit("ziColor","black")
})
onMounted(() => {
  if(route.query.params ){
    state.currentClassifyIndex =  route.query.params 
    state.search.classifyId =  route.query.params 
  }
  initData();
});
const state = reactive({
  currentClassifyIndex: 0,
  currentCrowdIndex: 0,
  currentFlavorIndex: 0,
  classifyList: [],
  crowdList: [],
  flavorList: [],
  cakeList: [],
  search: {
    limit: 12,
    page: 1,
    classifyId: "",
    flavorId: "",
    crowdId: "",
  },
});
const initData = () => {
  request.get("/classify/getNameList").then((res) => {
    if (res.code == 200) {
      state.classifyList = res.data;
    }
  });
  request.get("/crowd/getNameList").then((res) => {
    if (res.code == 200) {
      state.crowdList = res.data;
    }
  });
  request.get("/flavor/getNameList").then((res) => {
    if (res.code == 200) {
      state.flavorList = res.data;
    }
  });
  request.post("/cake/getCakelist", state.search).then((res) => {
    if (res.code == 200) {
      state.cakeList = res.data.records;
      state.search.total = res.data.total;
    }
  });
};
const searchClassify = (id) => {
  if(id == 0){
    state.search.classifyId = '';
    state.currentClassifyIndex = 0;
  }else{
    state.search.classifyId = id
    state.currentClassifyIndex = id;
  }
  initData()
};
const searchFlavor = (id) => {
  if(id == 0){
    state.search.flavorId = '';
    state.currentFlavorIndex = 0;
  }else{
    state.search.flavorId = id
    state.currentFlavorIndex = id;
  }
  initData()
};
const searchCrowd = (id) => {
  if(id == 0){
    state.search.crowdId = '';
    state.currentCrowdIndex = 0;
  }else{
    state.search.crowdId = id
    state.currentCrowdIndex = id;
  }
  initData()
};

const goToDetails = (id) => {
  router.push('/cakeDetail?params='+id)
};
const handleCurrentChange = (page) => {
  state.search.page = page;
  initData();
};

const handleSizeChange = (limit) => {
  state.search.limit = limit;
  initData();
};
</script>
<style scoped lang="scss">

.container-classify {
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 30px;
  .active {
    color: #c9b49b;
  }
  .lable-name{
    &:hover{
      cursor: pointer;
    }
  }
}
.item-list {
  // border: 1px solid red;
  margin-top: 30px;
  .item-box {
    display: flex;
    .item-line {
      // margin-left: 40px;
      // border: 1px solid red;
      text-align: center;
      // padding: 0px 40px;
      width: 100px;
    }
  }
}

.container-cake-box{
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
      .item-border {
        width: 25%;
        margin-bottom: 60px;
        &:hover{
        cursor: pointer;
      }
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .item-info {
          width: 250px;
          height: 50px;
          border: 1px solid #e7e7e7;
          margin-top: 20px;
          background-color: rgba(255, 255, 255, 0.7);
          text-align: center;
          .name{
            color:#3C2314;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .price{
            color:#AA8764;
          }
        }
      }
}

</style>
